<style lang="scss" scoped>
::v-deep .el-table {

    tr th,
    tr td {
        border-right: none;
    }
}

::v-deep .el-dialog__footer {
    text-align: center;
}

::v-deep .el-tabs__nav-wrap::after {
    background-color: transparent
}

.app-container {
    >p {
        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .header {
        min-height: 55px;
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 20px 45px rgba(240, 237, 246, 0.5);
        margin-bottom: 15px;
        padding: 10px 20px;

        >p {

            opacity: 1;
            margin: 0 0 0 20px;
            /** 文本1 */
            font-size: 18px;
            font-weight: 400;
            color: rgba(17, 38, 60, 1);
            border-left: 3px solid rgba(84, 91, 245, 1);
            padding-left: 10px;
            margin-bottom: 15px;
            margin-left: 0;
        }

        .images {
            display: flex;
            justify-content: space-between;
            padding: 0 100px;

            .item {
                text-align: center;

                p {
                    margin-top: 5px;
                    opacity: 1;
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0px;
                    line-height: 24px;
                    color: rgba(156, 159, 167, 1);
                    text-align: center;
                    vertical-align: top;

                }

                h1 {
                    font-size: 30px;
                    margin: 10px;
                }
            }
        }



    }


    .content {
        opacity: 1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 1);
        padding: 20px;

        .con_header {
            display: flex;
            justify-content: space-between;

            >p {
                opacity: 1;
                margin: 0 0 0 20px;
                /** 文本1 */
                font-size: 18px;
                font-weight: 400;
                color: rgba(17, 38, 60, 1);
                border-left: 3px solid rgba(84, 91, 245, 1);
                padding-left: 10px;
                margin-bottom: 15px;
                margin-left: 0;
            }

            .el-button {
                height: 32px;
                opacity: 1;
                border-radius: 2px;
                background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
                padding: 8px 18px;
                color: #fff;
                border: none;
                margin-left: 25px;

                &:hover {
                    border: none;
                    background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

                }



            }
        }

        .el-tabs {
            margin-left: 30px;

            ::v-deep .el-tabs__item {
                color: rgba(188, 195, 212, 1);
                font-size: 14px;
            }

            ::v-deep .is-active {
                color: rgba(94, 129, 244, 1) !important;
                opacity: 1;
                /** 文本1 */
                font-size: 15px;
                font-weight: 700;
                letter-spacing: 0px;
                color: rgba(94, 129, 244, 1);
            }

            ::v-deep .el-tabs__active-bar {
                background-color: rgba(94, 129, 244, 1) !important;
            }
        }

        .description-cell {
            .cell-content {
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 1.6em;
                max-height: 3.2em;
            }
        }



        ::v-deep .el-table {
            font-size: 12px;

            .el-tooltip__popper.is-dark {
                white-space: normal;
                max-width: 200px;
                /* 或者其他合适的宽度 */
            }
        }

        ::v-deep .el-table .el-table__header-wrapper th,
        ::v-deep .el-table .el-table__fixed-header-wrapper th {
            height: 41px !important;
            opacity: 1;
            border-radius: 10px 10px, 0px, 0px;
            background: rgba(83, 90, 244, 0.1);

            /** 文本1 */
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 0px;
            line-height: 11.72px;
            color: rgba(83, 90, 244, 1);
            vertical-align: top;

        }

        .status {
            display: block;
            padding: 3px 0px;
            opacity: 0.9;
            border-radius: 5px;
            font-size: 11px;
            text-align: center;
            transition: opacity 0.3s ease-in-out;
        }

        .status:hover {
            opacity: 1;
        }

        .status-unsold-recovered {
            color: rgb(159, 100, 223);
            /* 红色 */
            background-color: rgba(244, 235, 253, 1)
                /* 浅红色 */
        }

        .status-unsold-exception {
            color: #FF9800;
            /* 橙色 */
            background-color: #FFF3E0;
            /* 浅橙色 */
        }

        .status-sold-recovered {
            color: rgb(137, 64, 233);
            background-color: rgb(223, 241, 255);
        }

        .status-sold-exception {
            color: #F44336;
            /* 亮红色 */
            background-color: #FFEBEE;
            /* 浅红色 */
        }

        .status-sold-change-binding {
            color: #2196F3;
            /* 蓝色 */
            background-color: #E3F2FD;
            /* 浅蓝色 */
        }




    }

}

::v-deep .el-dialog {
    width: 772px;
    opacity: 1;
    border-radius: 30px;
    background: rgba(255, 255, 255, 1);

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    p {
        opacity: 1;
        margin: 0 0 0 20px;
        /** 文本1 */
        font-size: 18px;
        font-weight: 400;
        color: rgba(17, 38, 60, 1);
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 10px;
        margin-bottom: 15px;
        margin-left: 0;
    }

    .el-input {
        width: 165px;

        .el-input__inner {
            width: 165px;
            border: 1px solid rgba(127, 127, 213, 0.5);
            border-radius: 10px;
        }
    }

    .el-button {
        width: 60px;
        height: 32px;
        opacity: 1;
        border-radius: 2px;
        background: linear-gradient(268.09deg, rgba(96, 103, 250, 1) 0%, rgba(119, 153, 252, 1) 100%);
        padding: 8px 16px 8px 16px;
        color: #fff;
        border: none;
        margin-left: 25px;

        &:hover {
            border: none;
            background: linear-gradient(268.09deg, rgb(69, 78, 255) 0%, rgb(88, 130, 255) 100%);

        }

        &:nth-child(2) {
            width: 60px;
            height: 32px;
            opacity: 1;
            border-radius: 2px;
            background: rgba(242, 243, 245, 1);
            color: rgba(0, 0, 0, 0.3);
            padding: 8px 16px 8px 16px;

            &:hover {
                border: none;
                background: rgb(228, 228, 228);

            }
        }


    }

    .el-input-number {
        width: 165px;

        .el-input {
            width: 165px;

            .el-input__inner {
                width: 165px;
                border: 1px solid rgba(127, 127, 213, 0.5);
                border-radius: 0px;
            }
        }
    }

    .el-dialog__title {
        border-left: 3px solid rgba(84, 91, 245, 1);
        padding-left: 8px;

    }



}

::v-deep .el-table td.el-table__cell {
    border-bottom: none;
}

::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: none;
}

::v-deep .el-table::before {
    height: 0;
}
</style>
<template>
    <div class="app-container">
        <div class="content">
            <div class="con_header">
                <p>自动上架管理</p>
                <div>
                    <el-button type="warning" plain size="mini" @click="refreshCache">刷新缓存</el-button>
                    <el-button type="warning" plain size="mini" @click="show = true">库存预警</el-button>
                    <el-button type="warning" plain size="mini" @click="handleExport">批量改价</el-button>
                    <el-button type="warning" plain size="mini" @click="handleExport">批量下架</el-button>
                    <el-button type="warning" plain size="mini" @click="listings">批量上架</el-button>
                    <el-button type="warning" plain size="mini" @click="handleExport">编号导入</el-button>
                    <el-button type="warning" plain size="mini" @click="handleExport">导出</el-button>
                </div>

            </div>
            <el-tabs v-model="activeName" @tab-click="handleName">
                <el-tab-pane label="螃蟹" name=""></el-tab-pane>
                <el-tab-pane label="盼之" name="UnsoldRecovered"></el-tab-pane>
                <!-- <el-tab-pane label="氪金兽" name="UnsoldException"></el-tab-pane> -->
            </el-tabs>
            <el-tabs v-model="activeGame" @tab-click="handleGame">
                <el-tab-pane label="王者荣耀" name=""></el-tab-pane>
                <!-- <el-tab-pane label="原神" name="UnsoldRecovered"></el-tab-pane> -->
            </el-tabs>
            <el-table v-loading="loading" :data="managementList" @selection-change="handleSelectionChange" stripe>
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column label="编号" align="center" width="50">
                    <template slot-scope="scope">
                        {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>

                <el-table-column label="状态" align="center" prop="status" width="90">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == '1'" class="status status-unsold-recovered">未售</span>
                    </template>
                </el-table-column>

                <el-table-column label="账号描述" width="190" class-name="description-cell">
                    <template v-slot="scope">
                        <el-popover trigger="hover" placement="top" class="custom-popover">
                            <p style="white-space: normal; max-width: 400px;">{{ scope.row.accountDescription }}</p>
                            <div slot="reference" class="cell-content">{{ scope.row.accountDescription }}</div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column label="账号" align="center" prop="account" />
                <el-table-column label="密码" align="center" prop="password" />
                <el-table-column label="销售金额" align="center" prop="saleAmount" />
                <el-table-column label="回收金额" align="center" prop="recycleAmount" />
                <el-table-column label="回收时间" align="center" prop="storageTime">

                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.storageTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="回收渠道" align="center" prop="recycleAmount" />
                <el-table-column label="在库时间/天" align="center" prop="recycleAmount" />

                <el-table-column label="异常原因" align="center" prop="abnormityReason">
                </el-table-column>
                <el-table-column label="上架状态" align="center" prop="status" width="90">
                    <!-- <template slot-scope="scope">
                        <span v-if="scope.row.problemType == 'UnsoldRecovered'">成功</span>

                        <span v-if="scope.row.problemType == 'SoldRecovered'">失败</span>

                    </template> -->
                </el-table-column>
                <el-table-column label="商品编号" align="center" prop="abnormityReason">
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">

                        <el-button size="mini" type="text" @click="handleUpdate(scope.row)">
                            <span style="color: rgba(83, 90, 244, 1);margin-right: 5px">编辑 </span>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList('')" />
        </div>


        <el-dialog title="库存预警" :visible.sync="show" width="850px" append-to-body :close-on-click-modal="false">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="平台" align="center" width="180">
                    <template slot-scope="scope">
                        {{ scope.row.platform }}
                    </template>
                </el-table-column>


                <el-table-column label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-switch :value="scope.row.enable === 2" active-color="#13ce66" inactive-color="#FFB5B5"
                            @change="handleSwitchChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="登录账号" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.account" @change="$forceUpdate()"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="登录密码" align="center">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.password" @change="$forceUpdate()"></el-input>
                    </template>
                </el-table-column>
            </el-table>

            <!-- <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="平台" align="center" width="180">
                </el-table-column>
                <el-table-column prop="show" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.show" :active-value="true" :inactive-color="false" active-color="#13ce66"
                            inactive-color="#FFB5B5">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="address" align="center" label="登录账号">
                    <template slot-scope="scope">
                        <div v-if="scope.$index == 0">
                            <el-input v-model="account" @change="$forceUpdate()"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="password" align="center" label="登录密码">
                    <template slot-scope="scope">
                        <div v-if="scope.$index == 0">
                            <el-input v-model="password" @change="$forceUpdate()"></el-input>
                        </div>
                    </template>
                </el-table-column>
            </el-table>  -->
            <!-- <el-table :data="tableData1" style="width: 100%">
                <el-table-column prop="name" label="自动上架" align="center" width="180">
                </el-table-column>
                <el-table-column prop="show" label="操作" align="center" width="180">
                    <template slot-scope="scope">定
                        <el-switch v-model="scope.show" :active-value="true" :inactive-color="false" active-color="#13ce66"
                            inactive-color="#FFB5B5">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center">
                </el-table-column>
                <el-table-column label="" align="center">
                </el-table-column>
            </el-table>  -->
            <!-- <el-table :data="tableData1" style="width: 100%">
                <el-table-column prop="name" label="自动上架" align="center" width="180">
                </el-table-column>
                <el-table-column prop="show" label="操作" align="center" width="180">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.show" :active-value="true" :inactive-color="false" active-color="#13ce66"
                            inactive-color="#FFB5B5">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="address" align="center" label="设置时间">
                    <template slot-scope="scope">
                        <div v-if="scope.$index == 0">
                            <el-input v-model="time" @change="$forceUpdate()"></el-input>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="" align="center">
                </el-table-column>
            </el-table> -->
            <div slot="footer" class="dialog-footer" style="align-items: center;justify-content: center;">
                <el-button type="primary" @click="submit">确 定</el-button>
                <el-button @click="show = false" style="margin-left: 100px;">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 新增账号对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="游戏品类" prop="dictCodeId">
                            <el-select filterable v-model="form.dictCodeId" placeholder="请选择游戏品类" @change="handleGameCategoryChange">
                                <el-option v-for="item in gameList" :key="item.dictCode" :label="item.platform"
                                    :value="item.platform">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="" prop="region ">
                            <el-select filterable @change="changePhoneGameField" filterable v-model="form.region" placeholder="请选择区服">
                                <el-option v-for="  item   in   regionalServers  " :key="item.gameField"
                                    :label="item.gameField" :value="item.gameField">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="回收编号" prop="orderNumber">
                            <el-input v-model="form.orderNumber" placeholder="请输入回收编号" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="账号" prop="account">
                            <el-input v-model="form.account" placeholder="请输入账号" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="form.password" placeholder="请输入密码" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="回收渠道" prop="recycleChannelId">
                            <el-select filterable v-model="form.recycleChannelId" placeholder="请选择回收渠道">
                                <el-option v-for="  item   in   recycleChannelList  " :key="item.dictCode"
                                    :label="item.dictLabel" :value="item.dictCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="账号描述" prop="accountDescription">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.accountDescription"
                        placeholder="请输入账号描述" />
                </el-form-item>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="回收金额" prop="recycleAmount">
                            <el-input v-model="form.recycleAmount" placeholder="请输入回收金额" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="销售金额" prop="saleAmount">
                            <el-input v-model="form.saleAmount" placeholder="请输入销售金额" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="绑定类目" prop="bindingChannelId">
                            <el-select filterable @change="changeChannel" v-model="form.bindingChannelId" placeholder="请选择绑定类目">
                                <el-option v-for="  item   in   bindingChannelList  " :key="item.dictCode"
                                    :label="item.dictLabel" :value="item.dictCode">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="绑定手机" prop="phoneName">
                            <el-select filterable @change="changePhone" filterable v-model="form.phoneId" placeholder="请选择绑定手机">
                                <el-option v-for="  item   in   phoneList  " :key="item.phoneId" :label="item.phoneNumber"
                                    :value="item.phoneId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机编号" prop="phoneCode">
                            <el-input disabled v-model="form.phoneCode" placeholder="请先选择绑定手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="8">
                        <el-form-item label="换绑客服" prop="changeId">
                            <el-select filterable v-model="form.changeId" placeholder="请选择换绑客服">
                                <el-option v-for="  item   in   changeList  " :key="item.userId" :label="item.userName"
                                    :value="item.userId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="回收客服" prop="recycleId">
                            <el-select filterable v-model="form.recycleId" placeholder="请选择回收客服">
                                <el-option v-for="  item   in   recycleList  " :key="item.userId" :label="item.userName"
                                    :value="item.userId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">

                    </el-col>
                </el-row>
                <el-form-item label="备注" prop="remark">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.remark"
                        placeholder="请输入备注" />
                </el-form-item>
                <el-form-item label="上架编号" prop="shelfNumber">
                    <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 5 }" v-model="form.shelfNumber"
                        placeholder="请输入上架编号" />
                </el-form-item>
                <p>属性信息</p>

                <div v-for="child in result" :key="child.id" class="render">
                    <el-form-item
                        v-if="child.fieldType === 'select' && child && child.children && child.children.length > 0"
                        :label="child.gameField">
                        <el-select filterable v-model="dropDown[child.id]" placeholder="请选择">
                            <el-option v-for="item in child.children" :key="item.id" :label="item.gameField"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-if="child && child.fieldType === 'input' && child.children && child.children.length > 0"
                        :label="child.gameField">
                        <div style="display: flex; flex-wrap: wrap; gap: 10px;">
                            <el-form-item v-for="item in child.children" :key="item.id" :label="item.gameField">
                                <el-input placeholder="请输入" v-model="inputValues[item.id]"></el-input>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item v-if="child.fieldType === 'radio' && child && child.children && child.children.length > 0"
                        :label="child.gameField">
                        <el-radio-group v-model="radioSelections[child.id]"
                            @change="updateRadioSelection(child.id, $event)">
                            <el-radio v-for="option in child.children" :key="option.id" :label="option.id">
                                {{ option.gameField }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item
                        v-if="child.fieldType === 'checkbox' && child && child.children && child.children.length > 0"
                        :label="child.gameField">
                        <el-checkbox-group v-model="checkList">
                            <el-checkbox v-for="item in child.children" :key="item.id" :label="item.id" :value="item.id">
                                {{ item.gameField }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('mark')">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </el-dialog>

    </div>
</template>

<script>
import {
    listManagement,
    addManagement,
    unboundPhonesByCategory,
    update
} from '@/api/business/staylnventory'
import { getInfo, listDict } from '@/api/business/gameDict.js'
import { getGameDict, refreshCache } from '@/api/business/recyleGameDict.js'
import { bulk_listings } from '@/api/business/automaticShelves.js'
import { getDicts } from '@/api/system/dict/data.js'
import { listInventory } from '@/api/business/inventory.js'
export default {
    name: "Management",
    data() {
        return {
            inputValues: [],
            //区服列表
            regionalServers: [],
            isTransactionComplete: false,
            // 单选
            radioSelections: {},
            // 多选
            checkList: [],
            // 下拉
            dropDown: [],
            // 属性配置回显
            result: [],
            //状态数据
            TodayCount: '',
            status: {},
            dialogImageUrl: '',
            dialogVisible: false,
            //销售渠道
            saleChannelList: [],
            //库存状态列表
            stockStatusList: [],
            //绑定手机列表
            phoneList: [],
            //换绑客服
            changeList: [],
            //回收客服
            recycleList: [],
            //销售客服
            sellList: [],
            //二次实名
            secondaryRealNameList: [],
            //回收列表
            recycleChannelList: [],
            //渠道列表
            bindingChannelList: [],
            //区服列表
            regionList: [
                { label: '3936区', value: '3936' }
            ],
            //游戏列表
            gameList: [],
            activeGame: '',
            activeName: '',
            // 遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 表格数据
            managementList: [
                {}
            ],
            // 弹出层标题
            title: "",
            // 是否显示新增弹出层
            open: false,
            // 是否显示提号弹出层
            openNotation: false,
            // 是否显示转问题弹出层
            openProblem: false,
            //当前绑定的手机号和渠道
            bindingChannelId: '',
            phoneData: {
                phoneCode: null,
                phoneId: null,
                phoneNumber: null
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                phoneNumber: null,
                accountDescription: null,
                account: null,
                recycleChannelId: null,
                orderNumber: null,
                status: 1,
                value: 'honor'
            },
            // 表单参数
            form: {
                attribute: {
                    checkList: []
                }
            },
            // 提号表单参数
            formNotation: {
                orderRemark: '未追回赔付订单'
            },
            // 表单校验
            rules: {
                bindingChannelId: [
                    { required: true, message: "绑定类目不能为空", trigger: "change" }
                ],
                phoneId: [
                    { required: true, message: "绑定手机不能为空", trigger: "change" }
                ],
                expenditureAccount: [
                    { required: true, message: "支出金额不能为空", trigger: "blur" }
                ],
                incomeAccount: [
                    { required: true, message: "收入金额不能为空", trigger: "blur" }
                ]
            },
            account: "",
            password: "",
            time: "",
            show: false,
            tableData: [
                { name: '螃蟹代售', show: false, account: '', password: "" },
                { name: '盼之代售', show: false, account: '', password: "" }
            ],
            tableData1: [
                { name: '王者荣耀', show: false, account: '', password: "", time: "" }
            ],

        };
    },
    created() {
        this.getList();
        //查询游戏列字典
        this.getDicts('game_category').then(res => {
            this.gameList = res.data

        })
        //查询绑定渠道字典
        this.getDicts('binding_channel').then(res => {
            this.bindingChannelList = res.data
        })
        //查询回收渠道字典
        this.getDicts('recycle_channel').then(res => {
            this.recycleChannelList = res.data
        })
        //查询二次实名字典
        this.getDicts('secondary_real_name').then(res => {
            this.secondaryRealNameList = res.data
        })
        //查询状态字典
        this.getDicts('stock_status').then(res => {
            this.stockStatusList = res.data
        })
        //查询销售渠道
        this.getDicts('sale_channel').then(res => {
            this.saleChannelList = res.data
        })
        //查询回收客服
        this.passPost('recycle').then(res => {
            this.recycleList = res.data
        })
        //查询换绑客服
        this.passPost('change').then(res => {
            this.changeList = res.data
        })
        //查询销售客服
        this.passPost('sell').then(res => {
            this.sellList = res.data
        })


    },
    methods: {
        submit() {
            // 当用户点击确定按钮时，处理每一行的数据
            this.tableData.forEach((row, index) => {
                // console.log(this.gameList);
                let game = this.gameList.filter(item => item.dictValue !== null && !(!isNaN(item.dictValue) && item.dictValue !== ""));
                console.log(game);
                // localStorage.setItem('tableData', JSON.stringify(this.tableData));
            });
        },

        //刷新缓存
        refreshCache() {
            refreshCache().then(response => {
                this.$modal.msgSuccess("刷新缓存");
                this.getList()
            })
        },
        updateRadioSelection(childId, value) {
            this.$set(this.radioSelections, childId, value);
        },
        handleGameCategoryChange() {
            this.regionalServers = []
            let queryParams = {
                dictCodeId: this.form.dictCodeId
            }
            this.listDictData(queryParams)
        },

        // 区服选择
        changePhoneGameField(value) {
            this.regionalServers.forEach(item => {
                if (item.gameField == value) {
                    this.form.gameField = item.gameField
                }
            })
        },
        // 批量上架
        listings() {
            bulk_listings(this.ids).then(response => {
                this.$modal.msgSuccess("上架成功");
                this.getList()
            })
        },
        handleAvatarSuccess(response, file) {
            // 假设服务器响应的数据中包含了文件路径 'url'
            this.form.images = response.url; // 更新 form.image 为服务器返回的 URL
        },
        beforeAvatarUpload(file) {
            const isJPEG = file.type === 'image/jpeg'
            const isPNG = file.type === 'image/png'
            const jsJPG = file.type === 'image/jpg'
            // const isLt2M = file.size / 1024 / 1024 < 10
            if (!isJPEG && !isPNG && !jsJPG) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
                return false
            }
            return true;
        },
        //选中分类事件
        changeChannel(value) {
            this.form.phoneId = null
            this.form.phoneCode = null
            this.bindingChannelList.forEach(item => {
                if (item.dictCode == value) {
                    unboundPhonesByCategory(item.dictValue)
                        .then(res => {
                            this.phoneList = res.data
                            if (this.bindingChannelId == value) {
                                this.phoneList.unshift(this.phoneData)
                            }
                        })
                    return
                }
            })
        },
        //选中手机事件
        changePhone(value) {
            this.phoneList.forEach(item => {
                if (item.phoneId == value) {
                    this.form.phoneCode = item.phoneCode
                    this.form.phoneId = item.phoneId
                    this.form.phoneNumber = item.phoneNumber
                }
            })
        },
        //切换Tab
        handleGame(tab, event) {
            this.queryParams.problemType = tab.name
            this.getList()
        },
        //切换Tab
        handleName(tab, event) {
            this.getList()
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listManagement(this.queryParams).then(response => {
                this.managementList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
            listInventory(this.queryParams).then(response => {
                console.log(',,,,,', response);
                this.tableData = response.data
            })
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset();


            let bindingChannelId = ''
            let obj = {
                phoneCode: row.phoneCode,
                phoneId: row.phoneId,
                phoneNumber: row.phoneNumber,
            }
            this.bindingChannelList.forEach(item => {
                if (item.dictValue == row.phoneField) {
                    bindingChannelId = item.dictCode
                }
            })
            unboundPhonesByCategory(row.phoneField)
                .then(res => {
                    this.phoneList = res.data
                    this.phoneData = obj
                    if (!this.phoneList.find(item => item.phoneId == this.phoneData.phoneId)) {
                        this.phoneList.unshift(this.phoneData)
                    }
                })


            this.bindingChannelId = bindingChannelId
            this.form = {
                ...row,
                bindingChannelId,
                realNameId: Number(row.realNameId),
            }

            let queryParams = { dictCodeId: row.dictCodeId }
            this.listDictData(queryParams)
            getGameDict(row.id).then(response => {
                this.currentSelection = response.data
                this.initializeFormWithSelections()
            })
            this.open = true;
            this.title = "编辑";


        },


        listDictData(data) {
            listDict(data).then(response => {
                let data = response.data
                this.regionalServers = data.filter(e => e.gameKey === 'group')[0].children // 获取区服
                let result = data.filter(e => e.gameKey !== 'group')
                if (result) {
                    this.result = result
                }
            })

        },

        //新增 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        //新增 表单重置
        reset() {
            this.form = {
                // phoneCode: null,
                // phoneId: null
                attribute: {

                }
            };
            this.resetForm("form");
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.reset();
            this.open = true;
            this.title = "新增账号";
        },

        /** 新增 确认提交 */
        submitForm() {
            console.log("用户选择的区服ID是：", this.form.region);
            let dropDownMap = {};
            this.dropDown.forEach((value, index) => {
                if (value !== undefined) {
                    dropDownMap[index] = value;
                }
            });

            let inputValuesObj = {};
            this.inputValues.forEach((value, index) => {
                if (value !== undefined) {
                    inputValuesObj[index] = value;
                }
            });
            let attr = {
                radioSelections: this.radioSelections,
                dropDown: dropDownMap,
                inputValues: inputValuesObj,
                checkList: this.checkList
            }
            this.form.attribute = attr ;
            this.form.answer = JSON.stringify(attr);
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        update(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.getList()
                            this.open = false
                        })

                    }
                }
            });
        },

        initializeFormWithSelections() {
            this.currentSelection.forEach((selection, index) => {
                switch (selection.fieldType) {
                    case 'select':
                        this.$set(this.dropDown, parseInt(selection.tgameDict), parseInt(selection.tgameDictId))
                        break
                    case 'input':
                        this.$set(this.inputValues, selection.tgameDict, selection.value);
                        break
                    case 'radio':
                        this.$set(this.radioSelections, parseInt(selection.tgameDict), parseInt(selection.tgameDictId))
                        break
                    case 'checkbox':
                        if (Array.isArray(this.checkList)) {
                            this.checkList.push(parseInt(selection.tgameDict));
                        }
                        break;
                }
            })
        },


        listDictData(data) {
            listDict(data).then(response => {
                let data = response.data
                this.regionalServers = data.filter(e => e.gameKey === 'group')[0].children // 获取区服
                let result = data.filter(e => e.gameKey !== 'group')
                if (result) {
                    this.result = result
                }
            })
        },
        reset() {
            this.resetForm('form')
        },

        //提号 取消按钮
        cancelNotation() {
            this.openNotation = false;
            this.resetNotation();
        },
        //提号 表单重置
        resetNotation() {
            this.formNotation = {};
            this.resetForm("formNotation");
        },
        /** 提号按钮操作 */
        handleNotation(row) {
            this.resetNotation();
            this.openNotation = true
            this.formNotation = {
                ...row,
                orderRemark: '未追回赔付订单',
                category: '找回赔付',
                saleAmount: row.saleAmount,


            }
        },
        /** 提号 确认提交 */
        submitFormNotation(row) {
            if (row) {
                this.formNotation = {
                    ...row
                }
            }
            console.log(this.formNotation);
            completeCheckout(this.formNotation).then(response => {
                this.$modal.msgSuccess("成功");
                this.openNotation = false;
                this.getList();
            });

        },

        //转问题 取消按钮
        cancelProblem() {
            this.openProblem = false;
            this.resetProblem();
        },
        //转问题 表单重置
        resetProblem() {
            this.formProblem = {
            };
            this.resetForm("formProblem");
        },
        /** 转问题按钮操作 */
        handleDelete(row) {
            this.resetQuery();
            const id = row.id
            this.openProblem = true
        },
        /** 转问题 确认提交 */
        submitFormProblem() {

        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.$refs.queryForm.resetFields();
            this.handleQuery();
        },


        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1
            this.multiple = !selection.length
        },


        /** 导出按钮操作 */
        handleExport() {
            this.download('business/stock/export', {
                ...this.queryParams
            }, `management_${new Date().getTime()}.xlsx`)
        }
    }
};
</script>
